import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import AccountInfo from './components/account-info/Index'
import { TabPane, Tabs } from 'ant-design-vue'
import BasicInfo from './components/BasicInfo/Index'
import SchemeView from './components/Scheme/Index'
import DispatchingUnitVeiw from './components/DispatchingUnit/Index'
import OperationRecordView from './components/OperationRecord/Index'
import DiscountRecord from './components/DiscountRecord/Index'
import RebateRecord from './components/RebateRecord/Index'
import BillRecordView from './components/BillRecord/Index'

@Component
export class ClientProductDetailView extends Render {
    renderTabs() { 
        return (
            <Tabs>
                <TabPane key="1" tab="基础信息">
                    <BasicInfo />
                </TabPane>
                <TabPane key="2" tab="开通方案">
                    <SchemeView />
                </TabPane>
                <TabPane key="3" tab="账单记录">
                    <BillRecordView />
                </TabPane>
                <TabPane key="4" tab="派遣单位">
                    <DispatchingUnitVeiw />
                </TabPane>
                <TabPane key="5" tab="操作记录">
                    <OperationRecordView />
                </TabPane>
                <TabPane key="6" tab="优惠记录">
                    <DiscountRecord />
                </TabPane>
                <TabPane key="7" tab="返费记录">
                    <RebateRecord />
                </TabPane>
            </Tabs>
        )
    }
    render() {
        return <div class="px-24 py-20 flex flex-col h-full">
            <div class="flex-none">
                <AccountInfo></AccountInfo>
            </div>
            <div class="flex-1 mt-20">
                { this.renderTabs() }
            </div>
        </div>
    }
}

export default toNative<{}, {}>(ClientProductDetailView)